<template>
  <div class="home">
    <div style="margin-bottom: 20px">
      <h1 style="font-size: 20px">测试节流指令</h1>
      <Button type="primary" size="small" v-throttle="throttle">测试节流指令</Button>
    </div>

    <div style="margin-bottom: 20px">
      <h1 style="font-size: 20px">弹出层常用样式</h1>
      <Button type="primary" size="small" @click="popupFn">弹出层</Button>
    </div>

    <div style="margin-bottom: 20px">
      <h1 style="font-size: 20px">单行溢出提示组件</h1>
      <ul class="tipList">
        <li v-for="(item, index) in list" :key="index">
          <span>{{ item.label }}</span>
          <z-tips :text="item.value"></z-tips>
        </li>
      </ul>
    </div>

    <div style="margin-bottom: 20px">
      <h1 style="font-size: 20px">折叠动画（收起展开按钮在底部，针对所有内容）</h1>
      <z-fold :height="100">
        <div style="height: 50px; background-color: aqua"></div>
        <div style="height: 50px; line-height: 50px; background-color: lightblue">数据一</div>
        <div style="height: 50px; background-color: lightseagreen"></div>
        <div style="height: 50px; line-height: 50px; background-color: lightblue">数据二</div>
        <div style="height: 50px; background-color: aquamarine"></div>
        <div style="height: 50px; line-height: 50px; background-color: lightblue">数据三</div>
      </z-fold>
    </div>

    <div style="margin-bottom: 20px">
      <h1 style="font-size: 20px">折叠动画（收起展开按钮在尾部,仅针对文本有效！！！！）</h1>
      <z-foldText
        :text="'近数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了a'"
      ></z-foldText>
    </div>

    <Popup v-model:show="showPopup" closeable round position="bottom" :style="{ 'min-height': '20%', 'max-height': '85%' }">
      <div class="popup-main">
        <div style="height: 400px">哈哈哈</div>
      </div>
    </Popup>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Button, Popup } from 'vant'

function throttle() {
  console.log('--测试节流指令--')
}

const showPopup = ref(false)
function popupFn() {
  showPopup.value = true
}

const list = reactive([
  { label: '左侧文本：', value: '你的多字写的也太多了吧，我真的是装不下了，要不在tips提示框中查看呗~' },
  { label: '左侧文本：', value: '该行文字较少' },
  { label: '左侧文本：', value: '该行文字及较多，这里实在放不下我了，我要藏起来~' }
])
</script>

<style lang="scss" scoped>
.home {
  height: calc(100% - 50px);
  padding: 15px;
  .popup-main {
    margin-top: 40px;
    height: calc(100% - 40px);
    padding: 0 15px;
    overflow-y: auto;
  }
  .tipList {
    > li {
      @include flex();
      height: 40px;
      padding-left: 15px;
    }
  }
}
</style>
